﻿<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Catpic.Host profile">
    <Require feature="opensocial-templates"/>
    <Require feature="opensocial-1.0"/>
    <Require feature="opensocial-data" />
  </ModulePrefs>
  <Content type="html">
    <![CDATA[
    <style>
      .userProfile {font-size: 16px}
      .friendList{ list-style-type: none; }
      .table tr>td:first-child {font-size: 12px; width:140px; text-transform:uppercase; }
    </style>
    <script type="text/os-data" xmlns:os="http://ns.opensocial.org/2008/markup">
      <os:PeopleRequest key="viewerFriends" userId="@viewer" groupId="@friends" startIndex="10" count="20"/>
    </script>  
    <script type="text/os-template" require="viewerFriends">
        <ul class="friendList">
          <li repeat="${viewerFriends}">   
                <table class="table" width="100%">
                    <tr>
                        <td rowspan="6" width="160px"><img src="${thumbnailUrl}" height="140" width="140" alt="${displayName}"/></td>
                        <td>id</td>
                        <td>${id}</td>
                    </tr>
                    <tr>
                        <td>display name</td>
                        <td>${displayName}</td>
                    </tr>
                    <tr>
                        <td>gender</td>
                        <td>${gender}</td>
                    </tr>
                    <tr>
                        <td>family name</td>
                        <td>${name.familyName}</td>
                    </tr>
                    <tr>
                        <td>given name</td>
                        <td>${name.givenName}</td>
                    </tr>
                    <tr>
                        <td>formatted</td>
                        <td>${name.formatted}</td>
                    </tr>
                </table>  
            <br style="clear:both" />
          </li>
        </ul>
    </script>           
  ]]>
  </Content>
</Module>